<template>
    <div ref="el" style="width: 100%; height: 100%">
        <div style="color: white; float: right; cursor: pointer; margin-right: 30px">
            <span @click="dialogTableVisible1 = true" style="margin-left: 20px">消息</span>
            <el-badge :value="100" :max="10" class="item"></el-badge>
            <span style="margin-left: 20px" @click="exit">退出</span>
        </div>
    </div>
    <el-dialog v-model="dialogTableVisible" title="切换主题色" width="20%" height="250px">
        <div style="padding-bottom: 30px">
            <el-color-picker @change="switchColor" v-model="bgColor" />
        </div>
    </el-dialog>
    <el-dialog v-model="dialogTableVisible1" title="消息中心" width="40%">
        <div>你发布的XX任务已接单，XX将为你提供服务</div>
        <div>订单任务已完成请你确认</div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogTableVisible1 = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from 'vue-demi';
import { useCssVar } from '@vueuse/core';

const el = ref(null);
const color = useCssVar('--subject_color', el);

const url = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
const srcList = ref(['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']);

export default {
    name: 'header',
    data() {
        return {
            dialogTableVisible: false,
            dialogTableVisible1: false,
            bgColor: '#4B66E8',
            url,
            srcList,
            ruleForm: {
                name: '',
                introduction: '',
                address: '',
                phoneNumber: '',
                contactPerson: '',
                mailbox: '',
            },
        };
    },
    mounted() {
        color.value = '#4B66E8';
    },
    methods: {
        switchColor(newColor) {
            this.dialogTableVisible = false;
            color.value = newColor;
        },
        exit() {
            this.$router.push({ path: 'login' });
        },
    },
};
</script>

<style lang="scss" scoped></style>
